<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	
	#mydiv{
		width: 100px;;
		height: 100px;
		background: red;
		-webkit-transition:width 2s;
		transition: width 2s
	}
	
	#mydiv:hover{
		width:400px;
	}

</style>
</head>
<body>

	<div id="mydiv"></div>











<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">

	var adiv = document.getElementById('#mydiv')


	adiv.addEventListener("transitionend",function(e){
		adiv.innerHTML = "过渡事件触发---过渡已完成";
	})
	


</script>

</body>
</html>